﻿@{
    ViewBag.Title = "Loading";
    var F = Html.F();
}

@using System.Text

@section head {

    <style>
        body.f-body {
            padding: 10px;
        }

        ul.loading {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

            ul.loading li {
                display: inline-block;
                margin: 5px;
                text-align: center;
                border-style: solid;
                border-width: 0;
                padding: 11px 6px;
                width: 150px;
                cursor: pointer;
            }

                ul.loading li.hover,
                ul.loading li.active {
                    border-width: 3px;
                    padding: 8px 3px;
                }

                ul.loading li .title {
                    margin-top: 10px;
                }
    </style>
}


@section body {

    @{
        StringBuilder sb = new StringBuilder();

        sb.Append("<ul class=\"loading\">");
        for (int i = 1; i <= 30; i++)
        {
            string imageUrl = F.PageManager.Source.GetEmbedLoadingImageUrl(i);

            sb.AppendFormat("<li class=\"f-widget-content\"><img src=\"{0}\"><div class=\"title\">{1}</div></li>", imageUrl, i);
        }
        sb.Append("</ul>");
    }

    @Html.Raw(sb.ToString())
    

}

@section script {
    <script>
        F.ready(function () {
            // 选择主题窗口
            $('ul.loading li').hover(function () {
                $(this).addClass('hover');
            }, function () {
                $(this).removeClass('hover');
            }).click(function () {
                var loadingNumber = $(this).find('.title').text();

                F.cookie('Loading', loadingNumber, {
                    expires: 100  // 单位：天
                });

                top.window.location.reload();
            });


            // 初始化
            var loadingNumber = F.cookie('Loading');
            if (!loadingNumber) {
                loadingNumber = '1';
            }
            $('ul.loading li').each(function () {
                var cnode = $(this);
                if (cnode.find('.title').text() === loadingNumber) {
                    cnode.addClass('active');
                } else {
                    cnode.removeClass('active');
                }
            });
        });
    </script>
}